<!--
  垂直柱状图
           入参
          echartData Type Array
          transmitCityName Type String -->
<template>
  <div :id="id" class="chart"></div>
</template>

<script>
import china from './china2.json'
import zhejiang from './zhejiang/index.json'
//import guizhou from './guizhou/index.json'
import lishui from './zhejiang/lishui.json'
import echartsFontSize from '../left/echartsFontSize'

export default {
  name: 'MapEcharts',
  data() {
    return {
      id: this.generatorOnlyId(),
      cityName: '中国',
      myChart: null,
      json: china,
      cityList: [],
      index: 0,
      oneMapList: [],
      timer: null,
      currentName: '',
    }
  },
  props: {
    echartData: {
      type: Array,
      default() {
        return []
      },
    },
    currentBackName: {
      type: String,
      default: '',
    },
    transmitCityName: {
      type: String,
      default: '龙游县',
    },
    bgcColor: {
      type: Array,
      default() {
        return ['#10B9E7', '#F57474', '#56D0E3', '#F8B448', '#F8B78F', '#feAd40']
      },
    },
  },
  methods: {
    sonReturn() {
      this.$nextTick(function () {
        this.myChart.resize()
      })
    },
    // 生成图表的唯一ID
    generatorOnlyId() {
      return Math.floor(Math.random() * 10000)
    },
    // 绘制
    drawChart() {
      let _that = this
      if (this.myChart !== null) {
        /*this.myChart.off('click')
        this.myChart.off('mousemove')
        this.myChart.off('mouseout')
        this.myChart.dispose()*/
        this.myChart = null
      }
      this.myChart = this.$echarts.init(document.getElementById(this.id))
      if (this.myChart === undefined) {
        return
      }
      //this.myChart && this.myChart.clear()
      // console.log(_that.json)
      this.$echarts.registerMap(_that.cityName, { geoJSON: _that.json }) //引入地图文件
      this.myChart.setOption(this.myEchart(), true)
      setTimeout(() => {
        document.getElementsByClassName('right_index')[0].style.width = '3068px'
        document.getElementsByClassName('right_index')[0].style.height = '1600px'
      }, 10000)

      /*胡苗华说不用点击，暂时去掉事件*/
      //_that.echartAffair()
    },
    myEchart() {
      let _that = this
      let option = {
        tooltip: {
          showDelay: 200,
          trigger: 'item',
          backgroundColor: 'rgba(21,47,164, 0.45)',
          borderColor: '#fff',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 16,
          },
          position: function (p) {
            //其中p为当前鼠标的位置
            return [p[0] - 80, p[1] - 50]
          },
          formatter: function (params) {
            return `
                <div>${params.name}</div>
            `
          },
        },
        geo: {
          show: false,
          roam: false,
          map: _that.cityName,
        },
        series: [
          {
            type: 'map',
            show: true,
            // mapType: _that.cityName,//地图名称
            map: _that.cityName,
            selectedMode: false,
            aspectScale: 1,
            zoom: 1.2,
            itemStyle: {
              normal: {
                label: {
                  show: true, //默认是否显示省份名称
                  color: '#fff',
                  fontSize: echartsFontSize.fs(15),
                },

                areaColor: '#0F1743',
                borderWidth: 1,
                borderColor: '#BCCCE1',
              },
              emphasis: {
                label: {
                  show: true, //选中状态是否显示省份名
                  color: '#fff',
                  fontWeight: 'bold',
                  fontSize: echartsFontSize.fs(18),
                },
                shadowColor: 'rgba(0,214,213,0.45)',
                shadowBlur: 30,
                areaColor: '#091C4D', //选中状态的地图板块颜色
                borderWidth: 1,
                borderColor: '#31C5FE',
              },
            },
            // nameProperty: city === '龙游县'?'':'NAME',
            data: _that.echartData,
          },
        ],
      }
      return option
    },
    autoPlay() {
      let _that = this
      _that.timer = setInterval(function () {
        _that.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
        })
        _that.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: _that.index,
        })
        _that.myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: _that.index,
        })
        _that.index++
        if (_that.index >= _that.echartData.length) {
          _that.index = 0
        }
      }, 4000)
    },
    resetAffair() {
      let _that = this
      _that.myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
      })
      _that.myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: _that.index,
      })
      _that.myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: _that.index,
      })
    },
    echartAffair() {
      let _that = this
      clearInterval(_that.timer)
      // 鼠标移入事件
      _that.myChart.on('mousemove', function (e) {})
      // 鼠标移出恢复轮播
      _that.myChart.on('mouseout', function () {})
      // 点击事件
      _that.myChart.on('click', function (params) {
        // console.log(params)
        clearInterval(_that.timer)
        _that.timer = null
        let cityList = ['中国']
        if (params.name === '浙江') {
          cityList = ['中国', '浙江省']
          _that.json = zhejiang
          _that.cityName = params.name
          _that.index = 0
          _that.drawChart()
          _that.$emit('currentCityList', cityList)
          _that.$bus.emit('currentCityName', '浙江省', 2, cityList)
          _that.$bus.emit('currentCityNameHeader', '浙江省', 2)
        } /*else if (params.name === '贵州') {
          cityList = ['中国', '贵州省']
          _that.json = guizhou
          _that.cityName = params.name
          _that.index = 0
          _that.drawChart()
          _that.$emit('currentCityList', cityList)
          _that.$bus.emit('currentCityName', '贵州省', 2, cityList)
          _that.$bus.emit('currentCityNameHeader', '贵州省', 2)
        } */ else if (params.name === '丽水市') {
          cityList = ['中国', '浙江省', '丽水市']
          _that.json = lishui
          _that.cityName = params.name
          _that.index = 0
          _that.drawChart()
          _that.$emit('currentCityList', cityList)
          _that.$bus.emit('currentCityName', params.name, 3, cityList)
          _that.$bus.emit('currentCityNameHeader', params.name, 3)
        }
      })
    },
  },
  watch: {
    currentBackName(val) {
      // console.log(val)
      this.cityName = val
      if (val === '中国') {
        this.json = china
        this.cityName = '中国'
      } else if (val === '浙江省') {
        this.json = zhejiang
        this.cityName = '浙江省'
      }
      this.index = 0
      this.drawChart()
    },
    echartData() {
      this.drawChart()
    },
    cityName(val) {
      this.drawChart()
    },
    oneMapList() {
      this.drawChart()
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.drawChart()
    })
    window.addEventListener('resize', () => {
      //执行
      this.myChart.resize() // 监听宽度 重新绘制
    })
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
    this.myChart && this.myChart.clear()
  },
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
